import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import Tabs, { TabPane } from '@kuiper-components/tabs';

import Breadcrumb, { Item } from '../../../components/Breadcrumb';
import Library from './Library';
import Whitelist from './Whitelist';
import s from './KeywordSettings.module.css';
import Helper from '../../../components/Helper';

export default function KeywordSettings({
	history,
	match: {
		params: { type },
	},
}) {
	const handleTypeChange = type => {
		history.push(`/policy-manage/keyword-settings/${type}`);
	};

	return (
		<div className={s.keywordSettings}>
			<div className={s.header}>
				<Breadcrumb className={s.breadcrumb}>
					<Item disabled key="policy-manage">
						综合管理
					</Item>
					<Item active key="keyword-settings">
						敏感词策略
					</Item>
				</Breadcrumb>
			</div>
			<div className={cn('scanv-page-container', s.container)}>
				<Tabs className={s.tabs} activeKey={type} onChange={handleTypeChange}>
					<TabPane key="library" tab="敏感词库">
						<Library key={type} />
					</TabPane>
					<TabPane
						key="whitelist"
						tab={
							<>
								白名单设置
								<Helper
									placement="top"
									overlay="ScanV将对您添加到白名单的敏感词不做监测。"
								/>
							</>
						}
					>
						<Whitelist key={type} />
					</TabPane>
				</Tabs>
			</div>
		</div>
	);
}

KeywordSettings.propTypes = {
	match: PropTypes.shape({
		params: PropTypes.shape({
			type: PropTypes.string,
		}),
	}),
	history: PropTypes.shape({
		push: PropTypes.func,
	}),
};
